<html>
  <head>
  
  <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
  <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
  
  <title>Test Aup</title>
  	<script src="js/aupQuery.js"></script>
	<script src="js/aup.js"></script>
	<style>
		.cm_def_false {
			display:none;
		}
		.cm_def_true {
			
		}
		.color_red {
			color:red;
		}
		.color_black {
			
		}
	</style>
	<script>
		
		function loadAup(){
			aup.directive('anim', {
				expression: ['on', '$eventName', '$animation'], 
				render: function(node, compilation, bindings, dataContext){
					/*if(!node.hasData('widget_animations')){
						alert('SET');
						node.on('click', function(){
							node.style('color', red);
						});
						node.data('widget_animations', true);
					}*/
				}
			});
			
						
			var app = {};
			app.mails = [{ subject: 'soggetto 1', text: 'testo 1 testotestotestotestotestotestotestotesto'},
			             { subject: 'soggetto 2', text: 'testo 2 testotestotestotestotestotestotestotesto'},
			             { subject: 'soggetto 3', text: 'testo 3 testotestotestotestotestotestotestotesto'}];
			
			app.filteredMails = app.mails;
			
			app.currentMail;
			app.selectMail = function(data){
				app.currentMail = app.filteredMails[data.index];
				app.filter = '';
				app.filteredMails = app.mails;
			}
			app.close = function(data){
				app.currentMail = undefined;
			}
			app.isRed = function(subject){
				return (subject == 'soggetto 1' ? 'red' : 'black');
			}
			
			app.filter;
			app.applyFilter = function(){
				var newFiltered = [];
				for(var mi = 0; mi < app.mails.length; mi++){
					if(JSON.stringify(app.mails[mi]).indexOf(app.filter) != -1){
						newFiltered.push(app.mails[mi]);
					}
				}
				app.filteredMails = newFiltered;
			};
			
			aup.start(app);
			
			
		}
	
	
	</script>
  	
  </head>
  <body onload="loadAup()">
  		<div  class='cm_def_{currentMail == undefined}' >
 			<input field='filter' events='keyup: applyFilter' >
 			<div forEach='mail in filteredMails'>
 				<div events='click: selectMail' >{data.index + 1} ${mail.subject}</div>
 			</div>
 		</div>
 		<div with='currentMail as mail'  class='cm_def_{currentMail != undefined}' >
 			<div class='color_{isRed(mail.subject)}'>${mail.subject}</div>
 			<div>${mail.text}</div>
 			<div events='click: close'>CLOSE</div>
 		</div>	
 </body>
  

</html>